import React, { useState } from "react";
import CustomModal from "./index";

// 使用示例组件
function ModalExample() {
  const [visible, setVisible] = useState(false);
  const [mode, setMode] = useState("confirm");
  const [position, setPosition] = useState("center");

  const showModal = (modalMode, modalPosition = "center") => {
    setMode(modalMode);
    setPosition(modalPosition);
    setVisible(true);
  };

  const handleConfirm = () => {
    console.log("确认操作");
    setVisible(false);
  };

  const handleCancel = () => {
    console.log("取消操作");
    setVisible(false);
  };

  return (
    <div style={{ padding: "20px" }}>
      <h2>自定义Modal组件示例</h2>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", marginBottom: "20px" }}>
        <button onClick={() => showModal("position")}>位置权限请求</button>
        <button onClick={() => showModal("confirm")}>支付确认</button>
        <button onClick={() => showModal("error")}>失败提示</button>
        <button onClick={() => showModal("success")}>成功提示</button>
      </div>

      <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", marginBottom: "20px" }}>
        <button onClick={() => showModal("confirm", "center")}>居中位置</button>
      </div>

      <CustomModal
        visible={visible}
        mode={mode}
        position={position}
        onConfirm={handleConfirm}
        onCancel={handleCancel}
      />
    </div>
  );
}

export default ModalExample;
